Modals

Modals are windows that open on top of the screen you are using, usually by clicking a button or a link They usually contain forms, small amounts of information and simple actions to help users complete tasks quickly

When inside a modal you cannot interact with the page behind it, and the screen reader will not enter the page either. Users must leave the modal to continue using the system.

Modal types

Standard modal

This modal scrolls up and down the page as a whole with no sticky elements It has a line beneath the title which matches the theme colour.

Scrollable modal

If your modal has too much content use a scrollable modal with a sticky header, or consider creating a new page.

Modal rules

Modals are useful but not always. Content should relate to the screen and avoid excess of scrolling.

Buttons in Modals

Action buttons such as: Save, Create, Discard and Cancel are placed at the bottom within the sticky footer.

Padding

Spacing